<template>
  <div class="common-details">
    <customDetailsTopbar flag :title="`${title}详情`" @back="back" />
    <div class="infoWarp listInner">
      <component :is="currentComponent" :company-id="companyId" />
    </div>
  </div>
</template>
<script>
import safeInfo from './components/safety/infoDetail.vue'
import environmentInfo from './components/environment/infoDetail.vue'
import FireFightingInfo from './components/fireFighting/infoDetail.vue'

export default {
  components: {
    safeInfo,
    environmentInfo,
    FireFightingInfo
  },
  data() {
    return {
      currentComponent: '',
      list: [
        {
          key: '安全生产',
          value: 'safeInfo'
        },
        {
          key: '环保管理',
          value: 'environmentInfo'
        },
        {
          key: '消防管理',
          value: 'FireFightingInfo'
        }
      ],
      companyId: '',
      current: '',
      active: '',
      title: ''
    }
  },
  created() {
    const { current, companyId, active, title } = this.$route.query
    this.companyId = companyId || ''
    this.current = current || ''
    this.active = active || ''
    this.title = title || ''
  },
  mounted() {
    this.list = this.list.find((v) => {
      return v.key.indexOf(this.current) > -1
    })
    this.currentComponent = this.list.value
  },
  methods: {
    back() {
      this.$router.push({
        path: '/staging/facility',
        query: { current: this.current, active: this.active }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.infoWarp {
  position: absolute;
  top: 90px;
  right: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}
</style>
